<template>  
    <div>  
      <div v-for="(item, index) in addList" :key="index" class="list-item">  
        <span :class="{ 'completed': item.completed }">{{ item.content }}</span>  
        <button class="sss" @click="removeItem(index)">删除</button>  
        <button @click="toggleCompletion(index)">完成</button>  
      </div>  
    </div>  
  </template>  
    
  <script setup>  
  import { defineProps, defineEmits } from 'vue';  
    
  const props = defineProps({  
    addList: {  
      type: Array,  
      required: true  
    }  
  });  
    
  const emit = defineEmits(['removeItem', 'toggleCompletion']);  
    
  const removeItem = (index) => {  
    emit('removeItem', props.addList[index]);  
  };  
    
  const toggleCompletion = (index) => {  
    emit('toggleCompletion', props.addList[index]);  
  };  
  </script>  
    
    <style scoped>  
    .list-item {    
      display: flex;    
      justify-content: space-between;    
      align-items: center;    
      margin-bottom: 15px;    
      padding: 10px;    
      background-color: #fff;     
      border: 1px solid #ddd;     
      border-radius: 5px;     
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);   
      transition: background-color 0.3s ease;     
    }    
        
    .list-item:hover {    
      background-color: #f5f5f5;     
    }    
        
    .list-item span {    
      flex: 1;     
      font-size: 16px;    
      color: #333;     
    }    
        
    .completed {    
      text-decoration: line-through;    
      color: #999;     
    }    
        
    .list-item button {    
      padding: 5px 10px;    
      border: none;    
      border-radius: 3px;    
      cursor: pointer;    
      font-size: 14px;    
      color: #fff;    
      margin-left: 10px;     
    }    
        
    .list-item button:first-child {    
      background-color: green; /* 将删除按钮的背景色改为绿色 */  
    }    
        
    .list-item button:last-child {    
      background-color: #43edf3;     
    }    
        
    .list-item button:hover {    
      opacity: 0.9;     
    }   
    .sss{
     background: #43edf3;
    } 
    </style>